<template>
  <el-table :data="rolelist">
    <el-table-column prop="name" label="角色名" />
    <el-table-column prop="all_resources" label="权限资源" />
    <el-table-column prop="pid" label="父级角色" />
    <el-table-column prop="type" label="类型" />
    <el-table-column prop="permission" label="权限值" />
    <el-table-column label="修改权限" >
      <template #default="scope">
        <el-button type="primary" @click="showdialogue(scope.row)">修改权限</el-button>
      </template>
    </el-table-column>
    <el-table-column label="删除角色" >
      <template #default="scope">
        <el-button type="primary" @click="deleterole(scope.row.id)">删除角色</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button type="primary" @click="showdialogue1">新增角色</el-button>

  <el-dialog
    v-model="dialogVisible"
    title="修改角色资源"
    width="500"
  >
    <span>
      <div v-for="(item, key) in allresourceslist" :key="key">
        <el-checkbox v-model="resourceslist" :value="item.id">{{item.name}}</el-checkbox>
      </div>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="changeresources">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    v-model="dialogVisible1"
    title="新增角色"
    width="500"
  >
    <span>
      <el-select v-model="parent_selected" @change="getparentresources"  placeholder="请选择父级角色">
        <el-option v-for="(item, key) in parentrolelist" :key="key" :value="item.id" :label="item.name" >
        </el-option>
      </el-select>
      <br><br>
      <el-input v-model="role_name" placeholder="请输入角色名"></el-input>
      <br><br>
      <div v-for="(item, key) in allresourceslist" :key="key">
        <el-checkbox v-model="new_resourceslist" :value="item.id">{{item.name}}</el-checkbox>
      </div>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible1 = false, parent_selected = '', new_resourceslist = []">取消</el-button>
        <el-button type="primary" @click="createrole">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";
  import http from "../http"

  const route = useRoute()
  const router = useRouter()

  // 所有角色列表
  let rolelist = ref([])

  // 所有父级角色列表
  let parentrolelist = ref([])

  // 所有资源列表
  let allresourceslist = ref([])

  // 当前角色拥有的资源列表
  let resourceslist = ref([])

  // 新增角色资源列表
  let new_resourceslist = ref([])

  // 修改权限弹窗
  let dialogVisible = ref(false)

  // 新增角色弹窗
  let dialogVisible1 = ref(false)

  // 修改权限的角色
  let role_id = ref("")

  // 新增角色名
  let role_name = ref("")

  // 选择的父级角色的id
  let parent_selected = ref("")

  //获取全部父级角色列表
  const getparentrolelist = () =>{
    http.get(`myadmin/role_list/?type=0`)
    .then(res=>{
      console.log(res)
      parentrolelist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  // 获取全部角色列表
  const getrolelist = () =>{
    http.get(`myadmin/role_list/`)
    .then(res=>{
      console.log(res)
      rolelist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  // 获取全部资源列表
  const getallresourceslist = () =>{
    http.get(`myadmin/resource_list/`)
    .then(res=>{
      console.log(res)
      allresourceslist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  // 打开修改权限弹窗
  const showdialogue = (info) =>{
    dialogVisible.value = true
    resourceslist.value = info.all_resources_id
    console.log(info.all_resources_id)
    role_id.value = info.id
    console.log(role_id.value)
    console.log(resourceslist.value)
  }

  // 修改权限
  const changeresources = () =>{
    console.log(resourceslist.value)
    http.post(`myadmin/update_role_resources/`, {role_id: role_id.value, resource_ids: resourceslist.value})
    .then(res=>{
      console.log(res)
      getrolelist()
      dialogVisible.value = false
    })
    .catch(error=>{
      console.log(error)
    }
    )
  }

  // 打开新增角色弹窗
  const showdialogue1 = () =>{
    dialogVisible1.value = true
    getparentrolelist()
  }

  // 获取父角色资源
  const getparentresources = (id) =>{
    http.get(`http://127.0.0.1:8000/myadmin/get_resource_by_role/?role_id=${parent_selected.value}`)
    .then(res=>{
      console.log(res)
      new_resourceslist.value = res.data.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  // 新增角色
  const createrole = () =>{
    console.log(parent_selected.value)
    let type = 0
    if (parent_selected.value != ""){
      type = 1
    }
    if (role_name.value == ""){
      alert("请输入角色名")
      return
    }
    console.log(new_resourceslist.value)
    http.post(`myadmin/create_role/`, {name: role_name.value, pid: parent_selected.value, type: type, resources: new_resourceslist.value,
      resources_id_list: new_resourceslist.value
    })
    .then(res=>{
      console.log(res)
      getrolelist()
      parent_selected.value = ""  // 清空父级角色，方便下次创建角色
      new_resourceslist.value = [] // 清空资源列表，方便下次创建角色
      dialogVisible1.value = false
    })
    .catch(error=>{
     console.log(error) 
    })
  }

  // 删除角色
  const deleterole = (id) =>{
    http.delete(`myadmin/delete_role/${id}/`)
    .then(res=>{
      console.log(res)
      getrolelist() 
    }
    )
  }

  onMounted(()=>{
    getrolelist()
    getallresourceslist()
  })

</script>
